<template>
    <div class="home">
        <block-loading :loading="blockLoading">
            <van-row type="flex" justify="space-between" class="banner">
                <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left_run.png')"/>
                <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
            </van-row>
            <van-cell-group class="main_panel">
                <h3 class="title"><span><font>幼儿体质提升课程 </font></span></h3>
                <van-form @submit="dataFormSubmit" class="form_panel">
                    <van-field input-align="right"
                               v-model="fieldValue"
                               is-link
                               readonly
                               label="所在地"
                               placeholder="请选择所在地区"
                               @click="show = true" />
                    <van-popup v-model="show" round position="bottom">
                        <van-cascader
                                v-model="cascaderValue"
                                title="请选择所在地区"
                                :options="cityOptions"
                                @close="show = false"
                                @change="onChange"
                                @finish="onFinish"
                        />
                    </van-popup>
                    <van-field  v-model="dataForm.school_name" label="学校名称" input-align="right" placeholder="请填写学校名称" />
                    <van-field  v-model="dataForm.contacts" label="联系人" input-align="right" placeholder="请填写联系人姓名" />
                    <van-field  v-model="dataForm.phone" label="手机号码" input-align="right" type="digit" placeholder="请填写手机号码" />
                    <van-field  v-model="dataForm.one_pwd" label="密码" type="password" input-align="right" placeholder="请填写密码" />
                    <van-field  v-model="dataForm.two_pwd" label="确认密码" type="password" input-align="right" placeholder="请填写确认密码" />
                    <van-field  v-model="dataForm.serve_code" label="服务码" input-align="right" placeholder="请填写服务码" />
                    <div>
                        <van-button block type="warning"
                                    native-type="submit"
                                    :disabled="confirmLoading"
                                    :loading="confirmLoading"
                                    loading-text="信息提交中..." class="confirm_btn">提交信息</van-button>
                    </div>
                </van-form>
            </van-cell-group>

        </block-loading>
    </div>
</template>

<script>
// @ is an alias to /src
import $api from "@/api/index"
import WxJsSdk from "@/utils/WxJsSdk"
import configEnv from '_conf'
export default {
  name: "courseBuy",
  components: {},
  data() {
    return {
      show: false,
      confirmLoading:false,
      dataForm: {
        order_number:'',
        openid: '',
        city_id:'',
        country_id:'',
        province_id:'',
        school_name:'',
        one_pwd:'',
        two_pwd:'',
        contacts:'',
        phone:'',
        serve_code:''
      },
      btnLoading: false,
      blockLoading: false,
      fieldValue: '',
      cascaderValue: '',
      tabIndex:0,
      oneCityIndex:0,
      cityOptions: [],
    };
  },
  created() {
    this.loadCityInitData()
    const openid=localStorage.getItem('openId')
    if (openid) {
      this.openid=openid
      this.getSchoolState(openid)
    }
  },
  methods: {
    getCityList(id){
      return new Promise((resolve, reject) => {
        $api.baseInfo.getCityList({id}).then(res => {
          res.data.map(item => {
            item.text = item.name
            item.value = item.id
            if(this.tabIndex!=1){
              item.children = []
            }
            return item
          })
          resolve(res.data)
        })
      })
    },
    getSchoolState(openid){
      $api.user.getSchoolState({openid}).then(res=>{
        if (res.data.order_state == 0) { //开始支付
          this.$router.push("/course_buy")
        } else {
          if (res.data.school_state == 1) {
            this.$router.push("/select_class")
          }else{
            this.dataForm.order_number=this.$route.query.order_number
          }
        }
      })
    },
    // 加载城市列表
    loadCityInitData (id,tabIndex) {
      return new Promise((resolve, reject) => {
        if (id && id !== '0'&& tabIndex==0) {
          this.getCityList(id, true).then(data => {
            this.oneCityIndex=this.cityOptions.findIndex(item => item.id === id)
            const ThisOption = this.cityOptions[this.oneCityIndex]
            ThisOption.children = data
            this.cityOptions = [...this.cityOptions];
          })
        } else if (id && id !== '0'&& tabIndex==1) {
          this.getCityList(id, true).then(data => {
            const OneChildren=this.cityOptions[this.oneCityIndex].children
            const ThisOption = OneChildren[OneChildren.findIndex(item => item.id === id)]
            ThisOption.children = data
            this.cityOptions = [...this.cityOptions];
          })
        } else if(!id || id === '0'){
          this.getCityList().then(data => {
            this.cityOptions = data
            resolve()
          })
        }
      })
    },
    onChange({value,tabIndex}) {
      this.tabIndex=tabIndex
      this.loadCityInitData(value,tabIndex)
    },
    onFinish({selectedOptions}) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
      this.cascaderValue = selectedOptions.map((option) => option.id);
    },
    // 表单提交
    dataFormSubmit() {
      if(!this.openid){
        this.$dialog.alert({
          title: '友情提示',
          message: '请授权页面',
          theme: 'round-button',
          overlay:true
        }).then(() => {
          location.reload()
        });
        return false
      }
      this.confirmLoading=true
      this.dataForm .province_id=this.cascaderValue[0]
      this.dataForm .city_id=this.cascaderValue[1]
      this.dataForm .country_id=this.cascaderValue[2]
      this.dataForm.openid =  this.openid
      $api.user.setSchoolInfo(this.dataForm).then(res => {
        const abnormal_state=res.data.abnormal_state
        if(abnormal_state=='1'){
          this.$toast.fail(res.message)
          this.$router.push('/course_buy')
          return false
        }
        this.$toast.success(res.message)
        this.$router.push('Login')
      }).finally(() => {
        this.confirmLoading = false
      })
    }
  }
};
</script>
<style lang="scss" scoped>
    ::v-deep {
        .banner .banner_left {
            width: 287px;
            height: 280px;
            margin-top: -10px;
        }
        .main_panel {
            padding: 40px 10px;
            .title {
                text-align: center;
                font-size: 32px;
                font-weight: bold;
                margin: 0;
                color: #292929;
                span {
                    position: relative;
                    padding: 0 10px;
                    font {
                        z-index: 2;
                        position: relative;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 2px;
                        left: 0;
                        width: 100%;
                        height: 6px;
                        background: #FF804E;
                        border-radius: 3px;
                        z-index: 1;
                    }
                }
            }
        }
        .form_panel {
            padding-top: 40px;
            .van-cell {
                padding-left: 20px;
                padding-right: 20px;
                &:after {
                    left: 0;
                }
                .van-field__label {
                    font-size: 26px;
                    color: #777;
                }

            }
        }
        .confirm_btn {
            width: 376px;
            height: 74px;
            background: linear-gradient(180deg, #FF9C70 0%, #FF804E 100%);
            border-radius: 10px;
            font-size: 28px;
            margin: 90px auto;
        }
    }
</style>
